<template>
	<!-- 调用弹框使用<a>标签，如下面一行所示 -->
	<!-- <a href="#modal-form" data-toggle="modal">登录</a> -->

	<!-- 弹框内容 -->
	<div class="modal fade in" id="login-Dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body wrapper-lg">
					<div class="row">
						<div class="col-sm-6 b-r">
							<h3 class="m-t-none m-b">登录</h3>
							<p>相由心生 境随心转</p>
							<form role="form" v-on:submit.prevent="login()">
								<div class="form-group">
									<label>用户名</label>
									<input type="text" class="form-control" placeholder="邮箱|手机号|QQ" required v-model="model.username">
								</div>
								<div class="form-group">
									<label>密码</label>
									<input type="password" class="form-control" required v-model="model.password">
								</div>
								<div class="checkbox m-t-lg">
									<button type="submit" class="btn btn-sm btn-success pull-right text-uc m-t-n-xs"><strong>登录</strong></button>
									<label>
										<input type="checkbox"> 记住密码
									</label>
								</div>
							</form>
						</div>
						<div class="col-sm-6">
							<h4>没有注册账号？</h4>
							<p>你现在可以<a href="#" class="text-info">创建一个账号</a></p>
							<p>或者</p>
							<a href="javascript:void(0);" v-on:click="$api.auth.loginByQQ" class="btn btn-primary btn-block m-b-sm"><i class="fa fa-qq pull-left"></i>QQ登录</a>
							<!-- <a href="#" class="btn btn-info btn-block m-b-sm"><i class="fa fa-weixin pull-left"></i>微信登录</a> -->
							<!-- <a href="#" class="btn btn-danger btn-block"><i class="fa fa-weibo pull-left"></i>新浪微博登录</a> -->
						</div>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
</template>

<script>
	export default {
		name: "loginDialog",
		data() {
			return {
				model: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			login: async function() {
				this.$api.auth.login(this.model).then((tokenInfo) => {
					this.$store.commit("auth/login", tokenInfo);

					/**
					 * 获取用户信息
					 */
					this.$api.user.getByToken().then(userInfo => {
						this.$store.commit("auth/setUserInfo", userInfo);
						$('#login-Dialog').modal('toggle');
						console.debug("logged:", this.$store.state.auth.logged);

						this.$api.menu.getTreeByUser(userInfo.id).then(async (menuTree) => {
							await this.$router.initRoutes(menuTree);
							await this.$router.replace(this.$router.currentRoute.value.fullPath)
						});
					});
				});
			}

		}
	}
</script>

<style>
</style>
